<template>
    <div class="auto-archive-container">
        <div class="order-archive-header">
            <div style="display: flex;">
                <router-link to="/Home/ToDoContainer/ToDoUndone">
                    <div>未完成</div>
                </router-link>
                <router-link to="/Home/ToDoContainer/ToDoDone">
                    <div>已完成</div>
                </router-link>
            </div>
            <div>
                <el-button plain size="small" style="margin-right: 15px;" @click="goBackPage">返回</el-button>
            </div>
        </div>
        <div class="order-archive-body">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    name: "ToDoContainer",
    data() {
        return {
            form: {
                type: null,
            }
        }
    },
    methods: {
        goBackPage() {
            this.$router.push("/Home")
        },
    },
    mounted() {

    }

}

</script>

<style scoped>
.auto-archive-container {
    height: 100%;
    width: 95%;
    margin: 0 auto;
    margin-top: 1%;
    background-color: #fff;
}

.order-archive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    border-bottom: 2px solid #ebeef5;
}

.order-archive-header div {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    /* border-bottom: burlywood 1px solid; */
}

.order-archive-header a {
    &.router-link-active {
        /* border-bottom: 4px #409eff solid; */
        /* background-color: #409eff; */
        color: #409eff;
    }
}

.order-archive-body {
    width: 100%;
    height: 40%;
    margin: 10px auto;
}
</style>